
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Machine Multi-Purpose HTML Template</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all"/>
        <link href="css/themify-icons.css" rel="stylesheet" type="text/css" media="all"/>
        <link href="css/pe-icon-7-stroke.min.css" rel="stylesheet" type="text/css" media="all"/>
        <link href="css/flexslider.min.css" rel="stylesheet" type="text/css" media="all"/>
        <link href="css/lightbox.min.css" rel="stylesheet" type="text/css" media="all"/>
        <link href="css/theme.css" rel="stylesheet" type="text/css" media="all"/>
        <link href="css/custom.css" rel="stylesheet" type="text/css" media="all"/>
        <link href="http://fonts.googleapis.com/css?family=Roboto:100,400,300,700,400italic,500%7CMontserrat:400,700" rel="stylesheet" type="text/css">
    </head>
    <body>

				
		<div class="nav-container">
			<nav class="nav-1">
				<div class="container">
					<div class="row">
						<div class="col-xs-12">
							<a href="index.html" class="home-link">
								<img alt="Logo" class="logo" src="img/logo-square-light.png">
							</a>
							<ul class="menu">
								<li class="has-dropdown"><a href="#">Home</a>
									<ul class="subnav">
										<li><a href="index.html">Classic Home</a></li>
										<li><a href="home-2.html">Startup</a></li>
										<li><a href="home-3.html">Rustic</a></li>
										<li><a href="home-4.html">Agency</a></li>
										<li><a href="home-5.html">One Page</a></li>
										<li><a href="home-6.html">Personal</a></li>
										<li><a href="home-7.html">Landing</a></li>
									</ul>
								</li>
								<li class="has-dropdown"><a href="#">Pages</a>
									<ul class="subnav">
										<li class="has-dropdown-2"><a href="#">About</a>
											<ul class="subnav-level-2">
												<li><a href="about-1.html">About 1</a></li>
												<li><a href="about-2.html">About 2</a></li>
												<li><a href="about-3.html">About 3</a></li>
											</ul>
										</li>
										<li class="has-dropdown-2"><a href="#">Services</a>
											<ul class="subnav-level-2">
												<li><a href="services-1.html">Services 1</a></li>
												<li><a href="services-2.html">Services 2</a></li>
												<li><a href="services-3.html">Services 3</a></li>
											</ul>
										</li>
										<li class="has-dropdown-2"><a href="#">Coming Soon</a>
											<ul class="subnav-level-2">
												<li><a href="coming-soon-1.html">Coming Soon 1</a></li>
												<li><a href="coming-soon-2.html">Coming Soon 2</a></li>
											</ul>
										</li>
										<li><a href="404.html">404 Error</a></li>
									</ul>
								</li>
								<li class="has-dropdown"><a href="#">Blog</a>
									<ul class="subnav">
										<li class="has-dropdown-2"><a href="#">Post Pages</a>
											<ul class="subnav-level-2">
												<li><a href="blog-1.html">Grid</a></li>
												<li><a href="blog-2.html">Grid Sidebar</a></li>
												<li><a href="blog-3.html">Image</a></li>
												<li><a href="blog-4.html">Image Sidebar</a></li>
											</ul>
										</li>
										<li class="has-dropdown-2"><a href="#">Articles</a>
											<ul class="subnav-level-2">
												<li><a href="article-1.html">Article</a></li>
												<li><a href="article-2.html">Article Sidebar</a></li>
											</ul>
										</li>
									</ul>
								</li>
								<li class="has-dropdown"><a href="#">Work</a>
									<ul class="subnav">
										<li class="has-dropdown-2"><a href="#">Projects</a>
											<ul class="subnav-level-2">
												<li><a href="work-1.html">Filter Grid</a></li>
												<li><a href="work-2.html">Large Grid</a></li>
											</ul>
										</li>
										<li><a href="work-single-1.html">Single</a></li>
									</ul>
								</li>
								<li class="has-dropdown"><a href="#">Shop</a>
									<ul class="subnav">
										<li><a href="shop-1.html">Products Grid</a></li>
										<li><a href="product-1.html">Single Product</a></li>
									</ul>
								</li>
								<li class="has-dropdown"><a href="#">Contact</a>
									<ul class="subnav">
										<li><a href="contact-1.html">Project Planner</a></li>
										<li><a href="contact-2.html">Map & Instagram</a></li>
										<li><a href="contact-3.html">Simple Form</a></li>
									</ul>
								</li>
							</ul>
							
							<ul class="social-links">
								<li><a href="#"><i class="ti ti-twitter-alt"></i></a></li>
								<li><a href="#"><i class="icon ti ti-vimeo-alt"></i></a></li>
								<li><a href="#"><i class="icon ti ti-dribbble"></i></a></li>
							</ul>
						
							<div class="nav-functions">
						
								<div class="search-bar">
									<form class="search">
										<input type="text" placeholder="" name="search">
										<input type="submit" value="">
										<i class="pe-7s-search"></i>
									</form>
								</div>
							</div>
						</div>
					</div><!--end of row-->
				</div><!--end of container-->
			
				<div class="mobile-toggle">
					<div class="bar-1"></div>
					<div class="bar-2"></div>
				</div>
			</nav>
		</div>
		
		<div class="main-container">
		<section class="hero-slider large-image short-header">
				<ul class="slides">
					<li>
						<div class="background-image-holder background-parallax">
							<img alt="Slide Background" class="background-image" src="img/hero11.jpg">
						</div>
			
						<div class="container vertical-align">
							<div class="row">
								<div class="col-sm-12 text-center">
									<h1 class="text-white">Our Blog</h1>
								</div>
							</div>
						</div><!--end of container-->	
					</li>
				</ul>
			</section>
			
			<section class="blog-snippets-2">
				<div class="container">
					<div class="row">
						<div class="col-md-8">
							<div class="col-xs-12">
							<div class="blog-snippet-2">
								<a href="#">
									<div class="background-image-holder">
										<img alt="Slide Background" class="background-image" src="img/blog-large1.jpg">
									</div>
								</a>
								<div class="description">
									<div class="meta">
										<span class="date">24th November 2014 by <a href="#">Craig Garner</a></span>
										<ul class="tag-list">
											<li>
												<a class="btn btn-sm" href="#">Lifestyle</a>
											</li>
									
											<li>
												<a class="btn btn-sm" href="#">Photography</a>
											</li>
									
											<li>
												<a class="btn btn-sm" href="#">Design</a>
											</li>
										</ul>
									</div>
									<h3>Staying productive in the age of distraction</h3>
									<p>
										At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
									</p>
									<a href="#" class="btn btn-sm">Read More</a>
								</div>
							</div><!--end of individual snippet-->
						
							<div class="blog-snippet-2">
								<a href="#">
									<div class="background-image-holder fadeIn">
										<img alt="Slide Background" class="background-image" src="img/hero25.jpg">
									</div>
								</a>
								<div class="description">
									<div class="meta">
										<span class="date">21st November 2014 by <a href="#">James Hillier</a></span>
										<ul class="tag-list">
											<li>
												<a class="btn btn-sm" href="#">Lifestyle</a>
											</li>
									
											<li>
												<a class="btn btn-sm" href="#">Photography</a>
											</li>
									
											<li>
												<a class="btn btn-sm" href="#">Design</a>
											</li>
										</ul>
									</div>
									<h3>Couples that knit together stay together</h3>
									<p>
										At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
									</p>
									<a href="#" class="btn btn-sm">Read More</a>
								</div>
							</div><!--end of individual snippet-->
						</div>
						</div>
						
						<div class="col-md-3 col-md-offset-1 col-sm-9 col-sm-offset-3">
							<div class="sidebar">
				
								<div class="widget">
									<div class="search-bar">
										<form class="search">
											<input type="text" placeholder="" name="search" />
											<input type="submit" value="" />
											<i class="pe-7s-search"></i>
										</form>
									</div>
								</div><!--end of individual widget-->
				
								<div class="widget">
									<h5>Recent Posts</h5>
									<ul class="link-list">
										<li>
											<a href="#">The Ultimate Guide to Freelance Pricing</a>
											<span class="date">24th November 2014</span>
										</li>
						
										<li>
											<a href="#">HTML5 Cheatsheet</a>
											<span class="date">16th November 2014</span>
										</li>
							
										<li>
											<a href="#">Understanding CSS Transitions </a>
											<span class="date">3rd November 2014</span>
										</li>
									</ul>
								</div><!--end of individual widget-->
					
								<div class="widget">
									<h5>Categories</h5>
									<ul class="link-list">
										<li>
											<a href="#">Technology</a>
										</li>
						
										<li>
											<a href="#">Lifestyle</a>
										</li>
							
										<li>
											<a href="#">Photography</a>
										</li>
							
										<li>
											<a href="#">Design</a>
										</li>
									</ul>
								</div><!--end of individual widget-->
					
								<div class="widget">
									<h5>Tags</h5>
									<ul class="tag-list">
						
										<li>
											<a class="btn btn-sm" href="#">Lifestyle</a>
										</li>
							
										<li>
											<a class="btn btn-sm" href="#">Photography</a>
										</li>
							
										<li>
											<a class="btn btn-sm" href="#">Design</a>
										</li>
							
										<li>
											<a class="btn btn-sm" href="#">Interface</a>
										</li>
							
										<li>
											<a class="btn btn-sm" href="#">Beer</a>
										</li>
							
										<li>
											<a class="btn btn-sm" href="#">#Hashtags</a>
										</li>
									</ul>
								</div><!--end of individual widget-->
					
								<div class="widget">
									<h5>Instagram</h5>
									<div class="instafeed" data-user-name="brandswell">
										<ul></ul>
									</div>
								</div><!--end of individual widget-->
					
								<div class="widget">
									<h5>Twitter</h5>
									<div class="twitter-feed">
										<div class="tweets-feed tweets-slider" data-widget-id="492085717044981760">
					
										</div>
									</div>
								</div><!--end of individual widget-->
							</div>
						</div>
					</div><!--end of row-->
				
					<div class="row">
						<div class="col-sm-12 text-center">
							 <ul class="pagination">
								<li><a href="#"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></a></li>
								<li><a href="#">1</a></li>
								<li><a href="#">2</a></li>
								<li><a href="#">3</a></li>
								<li><a href="#">4</a></li>
								<li><a href="#">5</a></li>
								<li><a href="#"><span aria-hidden="true">»</span><span class="sr-only">Next</span></a></li>
							  </ul>
						</div>
					</div><!--end of row-->
				
				</div><!--end of container-->
			</section>			
			<footer class="footer-6">
				<div class="container">
					<div class="row">
						<div class="col-md-3 col-md-offset-1 col-sm-6">
							<a href="#">
								<img class="logo" alt="logo" src="img/logo-square-light.png">
							</a>
							<p>
								300 Collins St.<br> 
								Suite 2A<br>  
								Melbourne, 3000
							</p>
							<p>
								P: +6148 3847 382<br>
								E: hello@machine.net
							</p>
						</div>
					
						<div class="col-md-4 col-sm-6">
							<h5>Twitter</h5>
							<div class="twitter-feed">
								<div class="tweets-feed" data-widget-id="492085717044981760">
							
								</div>
							</div>
						</div>
					
						<div class="col-md-2 col-md-offset-1 col-sm-12">
							<h5>Navigate</h5>
							<ul class="link-list">
								<li><a href="#">About Us</a></li>
								<li><a href="#">Services</a></li>
								<li><a href="#">Our Work</a></li>
								<li><a href="#">Journal</a></li>
								<li><a href="#">Contact</a></li>
							</ul>
						</div>
				
					</div><!--end of row-->
				
					<div class="row">
						<div class="col-sm-12">
							<div class="footer-lower">
								<span>© Copyright 2014 Medium Rare, All Rights Reserved</span>
								<ul class="social-links">
									<li><a href="#"><i class="icon ti ti-twitter-alt"></i></a></li>
									<li><a href="#"><i class="icon ti ti-vimeo-alt"></i></a></li>
									<li><a href="#"><i class="icon ti ti-dribbble"></i></a></li>
	
								</ul>
							</div>
						</div>
					</div><!--end of row-->
				
				</div><!--end of container-->	
			</footer>
		</div>
		
				
		<script src="js/jquery.min.js"></script>


        <script src="js/bootstrap.min.js"></script>
        <script src="js/skrollr.min.js"></script>
        <script src="js/flexslider.min.js"></script>
        <script src="js/lightbox.min.js"></script>
        <script src="js/twitterfetcher.min.js"></script>
        <script src="js/spectragram.min.js"></script>
        <script src="js/smooth-scroll.min.js"></script>
        <script src="js/jquery.plugin.min.js"></script>
        <script src="js/countdown.min.js"></script>
        <script src="js/placeholders.min.js"></script>
        <script src="js/parallax.js"></script>
    	<script src="js/scripts.js"></script>
    </body>
</html>

				